<%--
  Created by IntelliJ IDEA.
  User: ZhuChunXiao
  Date: 2017/5/19
  Time: 10:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
  String _id=request.getParameter("_");
%>
<style>
  #bigTable{
    width: 60%;
    margin-left: 9%;
  }
  .familyContent{
    width: 100%;
    height: 26px;
    border: 1px solid #ccc;
    padding-left: 8px;
  }
  #bigTable td{
    text-align: center;
  }
  #familyMain>tr>td{
    padding: 0px;
  }
</style>
<form id="form_personnelself_input" class="panel-body form-horizontal form-padding">
  <input type="hidden" name="keyId" id="keyId" value="${personnelSelf.id}" />
  <input type="hidden" name="family" id="family"  />
  <input type="hidden" name="parentId" id="parentId" value="${parentId}" />

  <div class="form-group div-Hidden">
    <label class="col-md-2 control-label">出生日期<i class="fa fa-asterisk txt-color-red"></i></label>
    <div class="col-md-6">
      <div class="input-group date">
        <input type="text" class="form-control" id="birthday" name="birthday" placeholder="请选择出生日期"
               value=<fmt:formatDate pattern="yyyy-MM-dd" value="${personnelSelf.birthday}" /> >
        <span class="input-group-addon"><i class="ti-calendar"></i></span>
      </div>
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-2 control-label">籍贯<i class="fa fa-asterisk txt-color-red"></i></label>
    <div class="col-md-6">
      <input type="text" id="placeOrigin" name="placeOrigin" class="form-control" placeholder="请输入籍贯" value="${personnelSelf.placeOrigin}">
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-2 control-label">民族<i class="fa fa-asterisk txt-color-red"></i></label>
    <div class="col-md-6">
      <input type="text" id="nation" name="nation" class="form-control" placeholder="请输入民族" value="${personnelSelf.nation}">
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-2 control-label">居住地址<i class="fa fa-asterisk txt-color-red"></i></label>
    <div class="col-md-6">
      <input type="text" id="address" name="address" class="form-control" placeholder="请输入居住地址" value="${personnelSelf.address}">
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-2 control-label">紧急联络人<i class="fa fa-asterisk txt-color-red"></i></label>
    <div class="col-md-6">
      <input type="text" id="urgentPerson" name="urgentPerson" class="form-control" placeholder="请输入紧急联络人" value="${personnelSelf.urgentPerson}">
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-2 control-label">紧急联络电话<i class="fa fa-asterisk txt-color-red"></i></label>
    <div class="col-md-6">
      <input type="text" id="urgentPhone" name="urgentPhone" class="form-control" placeholder="请输入紧急联络电话" value="${personnelSelf.urgentPhone}">
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-2 control-label">户口所在地<i class="fa fa-asterisk txt-color-red"></i>
      <span id="registeredResidenceSpan" style="display: none">${personnelSelf.registeredResidence}</span>
    </label>
    <div class="col-md-6">

      <div class="radio">
        <!-- Inline radio buttons -->
        <input type="radio" name="registeredResidence" id="registeredResidence1Selected" class="magic-radio" value="1"
        <c:if test="${personnelSelf.registeredResidence eq 1}"> checked="checked"</c:if> >
        <label for="registeredResidence1Selected">上海户口</label>

        <input type="radio" name="registeredResidence" id="registeredResidence2Selected" class="magic-radio" value="2"
        <c:if test="${personnelSelf.registeredResidence eq 2}"> checked="checked"</c:if> >
        <label for="registeredResidence2Selected">非上海户口</label>

      </div>
    </div>
  </div>

  <div id="showResidencePermit" class="form-group" <c:if test="${personnelSelf.id==null||personnelSelf.registeredResidence==1}">style="display: none" </c:if> >
    <label class="col-md-2 control-label">居住证登记<i class="fa fa-asterisk txt-color-red"></i>
      <span id="residencePermitSpan" style="display: none">${personnelSelf.residencePermit}</span>
    </label>
    <div class="col-md-6">

      <div class="radio">
        <!-- Inline radio buttons -->
        <input type="radio" name="residencePermit" id="residencePermit1Selected" class="magic-radio" value="1"
        <c:if test="${personnelSelf.residencePermit eq 1}"> checked="checked"</c:if> >
        <label for="residencePermit1Selected">有</label>

        <input type="radio" name="residencePermit" id="residencePermit2Selected" class="magic-radio" value="2"
        <c:if test="${personnelSelf.residencePermit eq 2}"> checked="checked"</c:if> >
        <label for="residencePermit2Selected">无</label>

      </div>
    </div>
  </div>

  <div id="showReDate" class="form-group div-Hidden" <c:if test="${personnelSelf.id==null||personnelSelf.residencePermit==2}">style="display: none" </c:if> >
    <label class="col-md-2 control-label">居住证开始日期<i class="fa fa-asterisk txt-color-red"></i></label>
    <div class="col-md-2">
      <div class="input-group date">
        <input type="text" class="form-control" id="reDateStart" name="reDateStart" placeholder="请选择居住证开始日期"
               value=<fmt:formatDate pattern="yyyy-MM-dd" value="${personnelSelf.reDateStart}" /> >
        <span class="input-group-addon"><i class="ti-calendar"></i></span>
      </div>
    </div>
    <label class="col-md-2 control-label">居住证结束日期<i class="fa fa-asterisk txt-color-red"></i></label>
    <div class="col-md-2">
      <div class="input-group date">
        <input type="text" class="form-control" id="reDateEnd" name="reDateEnd" placeholder="请选择居住证结束日期"
               value=<fmt:formatDate pattern="yyyy-MM-dd" value="${personnelSelf.reDateEnd}" /> >
        <span class="input-group-addon"><i class="ti-calendar"></i></span>
      </div>
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-2 control-label">婚姻状况<i class="fa fa-asterisk txt-color-red"></i>
      <span id="marrySpan" style="display: none">${personnelSelf.marry}</span>
    </label>
    <div class="col-md-6">

      <div class="radio">
        <!-- Inline radio buttons -->
        <input type="radio" name="marry" id="marry1Selected" class="magic-radio" value="1"
        <c:if test="${personnelSelf.marry eq 1}"> checked="checked"</c:if> >
        <label for="marry1Selected">已婚</label>

        <input type="radio" name="marry" id="marry2Selected" class="magic-radio" value="2"
        <c:if test="${personnelSelf.marry eq 2}"> checked="checked"</c:if> >
        <label for="marry2Selected">未婚</label>

      </div>
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-2 control-label">最高学历<i class="fa fa-asterisk txt-color-red"></i></label>
    <div class="col-md-6">
      <select id="educationId" name="educationId" class="form-control">
        <option></option>
        <c:forEach var="item" items="${eduDictItems}" varStatus="status">
          <option value="${item.id}" <c:if test="${item.id == personnelSelf.education.id}"> selected="selected"</c:if>>${item.name}</option>
        </c:forEach>
      </select>
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-2 control-label">毕业学校<i class="fa fa-asterisk txt-color-red"></i></label>
    <div class="col-md-6">
      <input type="text" id="school" name="school" class="form-control" placeholder="请输入毕业学校" value="${personnelSelf.school}">
    </div>
  </div>

  <div class="form-group">
    <table class="table table-bordered" id="bigTable">
      <thead>
      <tr>
        <td colspan="7">家庭情况</td>
      </tr>
      <tr>
        <td>称谓</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>政治面貌</td>
        <td>工作单位</td>
        <td>职务</td>
        <td>联系电话</td>
      </tr>
      </thead>
      <tbody id="familyMain">
      <tr>
        <td><input class="familyContent familyNickName" type="text"></td>
        <td><input class="familyContent familyName" type="text"></td>
        <td><input class="familyContent familyAge" type="text"></td>
        <td><input class="familyContent familyPolitical" type="text"></td>
        <td><input class="familyContent familyWork" type="text"></td>
        <td><input class="familyContent familyPost" type="text"></td>
        <td><input class="familyContent familyPhone" type="text"></td>
      </tr>
      <tr>
        <td><input class="familyContent familyNickName" type="text"></td>
        <td><input class="familyContent familyName" type="text"></td>
        <td><input class="familyContent familyAge" type="text"></td>
        <td><input class="familyContent familyPolitical" type="text"></td>
        <td><input class="familyContent familyWork" type="text"></td>
        <td><input class="familyContent familyPost" type="text"></td>
        <td><input class="familyContent familyPhone" type="text"></td>
      </tr>
      <tr>
        <td><input class="familyContent familyNickName" type="text"></td>
        <td><input class="familyContent familyName" type="text"></td>
        <td><input class="familyContent familyAge" type="text"></td>
        <td><input class="familyContent familyPolitical" type="text"></td>
        <td><input class="familyContent familyWork" type="text"></td>
        <td><input class="familyContent familyPost" type="text"></td>
        <td><input class="familyContent familyPhone" type="text"></td>
      </tr>
      </tbody>
    </table>
  </div>


  <div class="form-group">
    <label class="col-md-2 control-label">提交人</label>
    <div class="col-md-2">
      <p class="form-control-static">${personnelSelf.creater.name}</p>
    </div>
    <label class="col-md-2 control-label">提交日期</label>
    <div class="col-md-2">
      <p class="form-control-static"><fmt:formatDate pattern="yyyy-MM-dd" value="${personnelSelf.createTime}" /></p>
    </div>
  </div>
</form>
<!--===================================================-->
<!-- END BASIC FORM ELEMENTS -->

<div class="panel-footer">
  <a class="btn btn-default" id="apply-re-common2" href="javascript:void(0)">
    <i class="fa fa-lg fa-mail-reply"></i> 返回视图
  </a>
  <c:if test="${personnelSelf.numStatus==0 && user.id==personnelSelf.creater.id}">
    <a class="btn btn-success" id="btn-save-common" href="javascript:void(0);"><i class="fa fa-lg fa-download"></i> 保存表单 </a>
    <a class="btn btn-warning" id="btn-submit-common" href="javascript:void(0);"><i class="fa fa-upload"></i> 提交表单 </a>
  </c:if>
</div>


<script>

  //显示隐藏
  $(":radio[name='registeredResidence']").click(function(){
    if($(this).val()==1){
      $("#showResidencePermit").hide();
      $("#showReDate").hide();
      $(":radio[name='residencePermit']").removeAttr("checked");
      $("#reDateStart").val("");
      $("#reDateEnd").val("");
    }else{
      $("#showResidencePermit").show();
    }
  });

  $(":radio[name='residencePermit']").click(function(){
    if($(this).val()==1){
      $("#showReDate").show();
    }else{
      $("#showReDate").hide();
      $("#reDateStart").val("");
      $("#reDateEnd").val("");
    }
  });

  // 日期选择
  $('.input-group.date').datepicker({
    format: 'yyyy-mm-dd',
    weekStart: 1,
    autoclose: true,
    todayBtn: 'linked',
    todayHighlight: true,
    language: 'zh-CN'
  });

  // 学历最高列表下拉框
  $("#educationId").select2({
    placeholder: "请选择一个最高学历",
    allowClear: true
  });

  //设置familyJson字符串
  function familyJson(){
    var family="[";
    for(var i=0;i<$("#familyMain tr").size();i++){
      family+='{"familyNickName":"'+$(".familyNickName")[i].value+
      '","familyName":"'+$(".familyName")[i].value+
      '","familyAge":"'+$(".familyAge")[i].value+
      '","familyPolitical":"'+$(".familyPolitical")[i].value+
      '","familyWork":"'+$(".familyWork")[i].value+
      '","familyPost":"'+$(".familyPost")[i].value+
      '","familyPhone":"'+$(".familyPhone")[i].value+'"},';
    }
    family=family.substring(0,family.length-1);
    family+="]";
    $("#family").val(family);
  }

  //校验
  function infoValidate() {
    var tmp = "";

    tmp = $("#form_personnelself_input input#birthday").val();
    if(!tmp){
      __toastr_error("请选择出生日期！");
      return false;
    }

    tmp = $("#form_personnelself_input input#placeOrigin").val();
    if(!tmp){
      __toastr_error("请输入籍贯！");
      return false;
    }

    tmp = $("#form_personnelself_input input#nation").val();
    if(!tmp){
      __toastr_error("请输入名族！");
      return false;
    }

    tmp = $("#form_personnelself_input input#address").val();
    if(!tmp){
      __toastr_error("请输入居住地址！");
      return false;
    }

    tmp = $("#form_personnelself_input input#urgentPerson").val();
    if(!tmp){
      __toastr_error("请输入紧急联络人！");
      return false;
    }

    tmp = $("#form_personnelself_input input#urgentPhone").val();
    if(!tmp){
      __toastr_error("请输入紧急联络电话！");
      return false;
    }

    tmp = $('#form_personnelself_input input:radio[name="registeredResidence"]:checked').val();
    if(!tmp){
      __toastr_error("请选择户口所在地！");
      return false;
    }

    var tmp1 = $('#form_personnelself_input input:radio[name="registeredResidence"]:checked').val();
    if(tmp1==2){
      tmp = $('#form_personnelself_input input:radio[name="residencePermit"]:checked').val();
      if(!tmp){
        __toastr_error("请选择是否有居住证登记！");
        return false;
      }
    }

    var tmp2 = $('#form_personnelself_input input:radio[name="residencePermit"]:checked').val();
    if(tmp2==1){
      tmp = $("#form_personnelself_input input#reDateStart").val();
      if(!tmp){
        __toastr_error("请选择居住证开始日期！");
        return false;
      }

      tmp = $("#form_personnelself_input input#reDateEnd").val();
      if(!tmp){
        __toastr_error("请选择居住证结束日期！");
        return false;
      }
    }

    tmp = $('#form_personnelself_input input:radio[name="marry"]:checked').val();
    if(!tmp){
      __toastr_error("请选择婚姻状况");
      return false;
    }

    tmp = $("#form_personnelself_input select#educationId").val();
    if(!tmp){
      __toastr_error("请选择最高学历！");
      return false;
    }

    tmp = $("#form_personnelself_input input#school").val();
    if(!tmp){
      __toastr_error("请输入毕业院校！");
      return false;
    }


    return true;
  }

  //保存
  $("#btn-save-common").click(
          function(e) {
            familyJson();
            __confirm_dialog("提示：","确定保存吗？",
                    function () {
                      __form_save("form_personnelself_input", "<%=path%>/activiti/personnelself/save");
                      returnToHashUrl();
                    }
            )
          }
  );

  //提交
  $("#btn-submit-common").click(
          function(e) {
            familyJson();
            var $valid = infoValidate();
//                console.log("v:"+$valid);
            if(!$valid) return false;

            __confirm_dialog("提示：","提交后填写资料不得修改，请确认是否进行提交？",
                    function () {
                      __form_save("form_personnelself_input", "<%=path%>/activiti/personnelself/submit");
                      returnToHashUrl();
                    }
            )
          }
  );

  //返回视图
  $("#apply-re-common2").click(returnToHashUrl);

  $(function(){
    //设置家庭情况的数据
    var famJson='${personnelSelf.family}';
    if(famJson!=null&&famJson!=""){
      var family=eval(famJson);
      for(var i=0;i<family.length;i++){
        $(".familyNickName")[i].value=family[i].familyNickName;
        $(".familyName")[i].value=family[i].familyName;
        $(".familyAge")[i].value=family[i].familyAge;
        $(".familyPolitical")[i].value=family[i].familyPolitical;
        $(".familyWork")[i].value=family[i].familyWork;
        $(".familyPost")[i].value=family[i].familyPost;
        $(".familyPhone")[i].value=family[i].familyPhone;
      }
    }
  });

</script>